<template>
	<view class="custom-class">
		<tn-nav-bar  :isBack="false" :alpha="true">专属定制</tn-nav-bar>
		<!-- <my-nav></my-nav> -->
		<!-- vuex_custom_bar_height -->
	  <view :style="{paddingTop: vuex_custom_bar_height + 'px'}" >
		<view class="conten-body">
			
		
	   
	   <tn-form  class="custom-form" :model="form" ref="form" :errorType="['message']" labelPosition="top">
	      <tn-form-item label="团建时间"  prop="start_time" :borderBottom="false">
	         <tn-input v-model="form.start_time" placeholder="请输入团建时间" @click="openTime" disabled showRightIcon rightIcon="down"/>
	       </tn-form-item>
	       <tn-form-item label="团建人数" prop="total" :borderBottom="false">
	         <tn-input v-model="form.total" placeholder="请输入团建人数" type="number"></tn-input>
			</tn-form-item>
			<tn-form-item label="团建时长" prop="duration" :borderBottom="false" > 
			  <tn-input v-model="form.durationText" @click="openSelect" placeholder="请选择团建时长" disabled showRightIcon rightIcon="down"></tn-input>
			</tn-form-item>
			<tn-form-item label="联系电话" prop="mobile"  :borderBottom="false">
				<tn-input v-model="form.mobile" placeholder="请输入联系电话" type="number" :fixed="true"></tn-input>
				
			   
			</tn-form-item>
			<tn-form-item  prop="sms_code"  class="phone-style" :borderBottom="false">
				
				<tn-input v-model="form.sms_code" class="input" type="number" placeholder="请输入验证码"></tn-input>
				<tn-button class="button" width="202rpx" backgroundColor="#F0F0F0" fontColor="#7F7D8C" :disabled="smsCountDown>0" @click="onSMSSend">{{getSendBtnText}}</tn-button>
			
			</tn-form-item>
		</tn-form>
		</view>
		<view class="footer">
			<tn-button  shape="round" fontBold fontSize="32" backgroundColor="#3B54DA" fontColor="#FFFFFF" width="290rpx" height="72rpx"  @click="addCustom">定制专属方案</tn-button>
		</view>
		
		<!-- open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" -->
	 
	   </view>
	   <tn-calendar safeAreaInsetBottom v-model="calenderShow" mode="date" @change="change" ></tn-calendar>
	   <tn-select safeAreaInsetBottom v-model="show" mode="single" labelName="text" :list="list" @confirm="confirm" :searchShow="false" ></tn-select>
	   <tn-picker safeAreaInsetBottom mode="time" v-model="timeShow" :params="params" @confirm="timeConfirm"></tn-picker>
	</view>
</template>

<script>
	
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		components:{
			
		},
		data(){
			return{
				form:{},
				show:false,
				list:[],
				timeShow:false,
				params: {
				  year: true,
				  month: true,
				  day: true,
				  hour: false,
				  minute: false,
				  second: false
				},
				calenderShow:false,
				smsCountDown: 0,
				smsCountInterval: null,
			}
		},
		computed: {
		      
		      getSendBtnText() {
		        if (this.smsCountDown > 0) {
		          return this.smsCountDown + '秒后发送';
		        } else {
		          return '发送验证码';
		        }
		      }
		},
		methods:{
			addCustom(){
				if(!this.form.start_time){
					this.$tip.toast('请输入开始时间')
					return;
				}
				if(!this.form.total){
					this.$tip.toast('请输入人数')
					return;
				}
				if(!this.form.duration){
					this.$tip.toast('请选择时长')
					return;
				}
				if(!this.form.mobile){
					this.$tip.toast('请选择电话号码')
					return;
				}
				if(!this.form.sms_code){
					this.$tip.toast('请选择验证码')
					return;
				}
				this.$http.post('/api/business/customization/handle',this.form).then((res) => {
					if(res.data.status == 200) {
						this.$tip.success('添加成功!');
						setTimeout(()=>{
							this.$emit('success')
						},1000)
						
					}else {
						this.$tip.alert(res.data.message)
					}
				})
			},
			timeConfirm(data){
				console.log('shijian ',data)
				this.form.start_time = data.year+'-'+data.month+'-'+data.day;
			},
			change(e){
				console.log('rili',e);
				this.form.start_time = e.date;
			},
			openTime(){
				console.log('zadeile')
				// this.calenderShow = true;
				this.timeShow = true;
			},
			openSelect(){
				
				this.getDuration();
			},
			getDuration(){
				this.$http.get('/api/dictionary/data',{title:'duration'}).then((res) => {
					if(res.data.status == 200) {
						this.show = true;
						let result = res.data.data ||[];
						this.list = result;
						// for(let key in result){
						// 	this.list.push(result[key]);
						// }
						console.log('duration1111',this.list,result)
					} else {
						
					}
				})
			},
			confirm(e){
				console.log('confire',e)
				this.form.durationText = e[0].label;
				this.form.duration = e[0].value;
			},
			
			onSMSSend(){
				let smsParams = {mobile:this.form.mobile}
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				if(!smsParams.mobile || smsParams.mobile.length==0){
					this.$tip.toast('请输入手机号');
					return false
				}
				if(!checkPhone.test(smsParams.mobile)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.get('/api/business/customization/get_code',smsParams).then((res) => {
					if(res.data.status == 200){
							this.smsCountDown = 60;
							this.startSMSTimer();
					}else{
							this.smsCountDown = 0;
							this.$tip.toast(res.data.message);
					}
				})
			},
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
				  this.smsCountDown--;
				  if (this.smsCountDown <= 0) {
					clearInterval(this.smsCountInterval);
				  }
				}, 1000);
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.custom-class{
		.conten-body{
			padding:100rpx 30rpx 0rpx;
			
		}
		.custom-form{
			
			width: 100%;
			/deep/.tn-input__right-icon__item{
				margin-right: 30rpx;
				.icon{
					color: #D7D7D7!important;
					font-size: 32rpx;
				}
				
			}
			.phone-style{
				
				display: flex;
				.sms_input{
					width: 178rpx;
					margin-left: 20rpx;
				}
				/deep/.tn-form-item--left{
					flex:0!important;
					margin-bottom: 0!important;
				}
				/deep/.tn-form-item--right__content__slot{
					display: flex
				}
				
				.input{
					width: 100%;
				}
				.button{
					margin-left: 28rpx;
				}
				.label{
					margin-left: 20rpx;
					color: #3B54DA;
					font-size: 28rpx;
				}
			}
		}
		.footer{
			text-align: center;
			margin-top:84rpx;
		}
	}
</style>